<?php 
    $user=$viewModel->get('user');
 ?>
    <div class="container">
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
			<div class="span10 offset1">
				<div class="row col-md-offset-2" style="color:green;padding-bottom:20px;">
	    			<h3><b>THÔNG TIN CÁ NHÂN</b></h3>
	    		</div>
                <a id="edit" class="btn btn-primary">Chỉnh sửa</a>&nbsp
                <a id="cancel" class="btn btn-danger">Hủy</a>
    			<form id="registrationForm" class="form-horizontal" enctype="multipart/form-data" action="" method="post">
                    <h4><span class="glyphicon glyphicon-user"></span> Thông tin cá nhân</h4>
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-md-2" for="name">Họ và tên (*)</label>
                        <div class="col-md-4">
                        <input type="text" class="form-control" name="TenNguoiDung" id="name" value="<?php echo $user->TenNguoiDung; ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2" for="birthday">Ngày sinh </label>
                        <div class="col-md-4">
                        <input placeholder="DD/MM/YYYY" type="text" class="form-control" name="NgaySinh" id="birthday" value="<?php echo $user->NgaySinh; ?>">
                        </div>
                    </div>
    				<div class="form-group">
	    				<label class="control-label col-md-2" for="cv">Tiểu sử</label>
	    				<div class="col-md-4">
						<textarea id="cv"  name="TieuSu" class="form-control" value="<?php echo $user->TieuSu; ?>"></textarea>
						</div>
    				</div>
                    <h4><span class="glyphicon glyphicon-phone-alt"></span> Thông tin liên hệ</h4>
                    <hr>
                     <div class="form-group">
                        <label class="control-label col-md-2" for="phonenumber">SĐT</label>
                        <div class="col-md-4">
                        <input type="text" class="form-control" name="SDT" id="phonenumber" value="<?php echo $user->SDT; ?>"> 
                        </div>
                    </div>
                     <div class="form-group">
                        <label class="control-label col-md-2" for="email">Email</label>
                        <div class="col-md-4">
                        <input type="email" class="form-control" name="Email" id="email" value="<?php echo $user->Email; ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-2" for="address">Địa chỉ</label>
                        <div class="col-md-4">
                        <input type="text" class="form-control" name="DiaChi" id="address" value="<?php echo $user->DiaChi; ?>">
                        </div>
                    </div>
                    <h4><span class="glyphicon glyphicon-log-in"></span> Thông tin đăng nhập hệ thống</h4>
                    <hr>
                    <div class="form-group">
                        <label class="control-label col-md-2">Tên đăng nhập: </label>
                        <label class="control-label-text-left col-md-4"><?php echo $user->TaiKhoan ?></label>
                    </div>
    				<div class="form-group">
	    				<label class="control-label col-md-2" for="pass">Mật khẩu</label>
	    				<div class="col-md-4">
						<input type="password" class="form-control" name="MatKhau" id="pass" value="<?php echo $user->MatKhau; ?>">
						</div>
    				</div>

    				<div class="form-group">
	    				<label class="control-label col-md-2" for="retypepass">Nhập lại mật khẩu</label>
	    				<div class="col-md-4">
						<input type="password" class="form-control" name="NhapLaiMatKhau" id="retypepass" value="<?php echo $user->MatKhau;?>">
						</div>
    				</div>
    				<div class="form-group">
    					<div class="col-md-2"></div>
    					<div class="col-md-4">
    					<button type="submit" class="btn btn-success btn-large">Cập nhật</button>
    					</div>
    				</div>
				</form>
			</div>
		</div>
	</div>
    <script type="text/javascript">
    $( document ).ready(function() {
        $( ":input" ).prop( "disabled", true );

        $( "#edit" ).click(function() {
         $( ":input" ).prop( "disabled", false );});

        $( "#cancel" ).click(function() {
            $( ":input" ).prop( "disabled", true );});
        
        });
    $(document).ready(function() {
    $('#registrationForm').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            MatKhau: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    different: {
                        field: 'TaiKhoan',
                        message: 'The password cannot be the same as username'
                    },
                    stringLength: {
                        min: 6,
                        message: 'The password must have at least 6 characters'
                    },
                    identical: {
                        field: 'NhapLaiMatKhau',
                        message: 'The password and its confirm are not the same'
                    }
                }
            },
            NhapLaiMatKhau: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    },
                    identical: {
                        field: 'MatKhau',
                        message: 'The password and its confirm are not the same'
                    }
                }
            },
            TenNguoiDung: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    }
                }
            },
            Email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The email address is not a valid'
                    }
                }
            },
            NgaySinh: {
                validators: {
                    date: {
                        format: 'DD/MM/YYYY',
                        message: 'The value is not a valid date'
                    }
                }
            }

        }
    });
});
    </script>
